<!DOCTYPE html>
<html>
<head>
    <title>用户数据查看</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .user-card { 
            border: 1px solid #ddd; 
            padding: 10px; 
            margin: 10px 0; 
            border-radius: 5px;
        }
        .loading { color: #666; }
        .error { color: red; }
        button { 
            padding: 10px 20px; 
            background: #4CAF50; 
            color: white; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
        }
        button:hover { background: #45a049; }
    </style>
</head>
<body>
    <h1>用户数据列表</h1>
    <button onclick="loadUsers()">刷新数据</button>
    <div id="status"></div>
    <div id="userList"></div>

    <script>
        function loadUsers() {
            const status = document.getElementById('status');
            const userList = document.getElementById('userList');
            
            status.textContent = '加载中...';
            status.className = 'loading';
            
            fetch('/getUsers')
                .then(response => response.json())
                .then(users => {
                    status.textContent = `共找到 ${users.length} 个用户`;
                    userList.innerHTML = users.map(user => `
                        <div class="user-card">
                            <h3>用户名: ${user.username || '未设置'}</h3>
                            <p>邮箱: ${user.email || '未设置'}</p>
                            <p>电话: ${user.phone || '未设置'}</p>
                            <p>角色: ${user.roles || '未设置'}</p>
                            <p>创建时间: ${new Date(user.createTime).toLocaleString()}</p>
                            <p>更新时间: ${new Date(user.updateTime).toLocaleString()}</p>
                        </div>
                    `).join('');
                })
                .catch(error => {
                    status.textContent = '加载失败: ' + error.message;
                    status.className = 'error';
                    console.error('获取数据失败:', error);
                });
        }

        // 页面加载完成后自动加载数据
        window.onload = loadUsers;
    </script>
</body>
</html> 